<template>
  <div class="container" style="">
    <van-nav-bar title="售前报表" left-arrow @click-left="$router.back()" fixed>
      <template #right>
        <icon-svg name="select" class="icon" :size="20" @click="openSearch" />
      </template>
    </van-nav-bar>
    <div class="flex-scroll">
      <van-tabs v-model="activeTabIndex">
        <van-tab title="个人报表"></van-tab>
        <van-tab title="售前报表"></van-tab>
      </van-tabs>
      <div style="height: 100%;">
        <!-- 个人报表 -->
        <Person ref="person" v-if="activeTabIndex === 0" />
        <Department ref="department" v-else />
      </div>

    </div>

    <!---->
  </div>
</template>

<script>
import Person from "./person";
import Department from "./department";


export default {
  components: {
    Person,
    Department
    // PopSelect
  },
  data() {
    return {
      activeTabIndex: 0,
    }
  },

  methods: {
    openSearch() {
      if (this.activeTabIndex === 0) {
        this.$refs.person.openSearch()
      } else {
        this.$refs.department.openSearch()
      }
    }

  },
}
</script>
<style scoped lang='scss'>
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-top: 46px;
  font-size: 14px;

  ::v-deep .el-table th {
    background-color: #f2f2f2 !important;
  }

  .flex-scroll {
    height: calc(100% - 90px);
    // overflow-y: auto;
  }

  .has-gutter {
    margin-top: 40px;
  }

}
</style>
